<template>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="Commodity">
            <div class="Commodity_seler">
                <div class="Commodity_banner">
                    <img src="@/assets/img/Commodity/banner.png" alt="">
                </div>
                <div class="Commodity_ser">
                    <div class="Commodity_nav">
                        <div class="list">
                            <div :key="index" v-for="(Item, index) in CategoryList"
                                :class="['int', Item.Value == category ? 'active' : '']" @click="CategoryFan(Item.Value)">
                                {{ Item.Key }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Commodity_tabel">
                <div class="Home_PickWeek">
                    <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
                    <div class="PickWeek">
                        <div class="int" :key="index" v-for="(Item, index) in ProductList">
                            <div class="img">
                                <img :src="Item.Picture" alt="">
                                <!-- <p> 已购买{{ Item.Raise }}元 </p> -->
                            </div>
                            <div class="nav_week">
                                <div class="week_a"> {{ Item.Name }} </div>
                                <div class="week_b">
                                    <div class="moert"> 售价： <span> {{ Item.Price }} </span> </div>
                                </div>
                                <div class="week_btn" @click="goProductDetails(Item.ID)"> 购买 </div>
                            </div>
                        </div>
                    </div>
                    <!-- </van-list> -->
                </div>
            </div>
        </div>
    </van-pull-refresh>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { Toast, Notify } from 'vant';
import { useStore } from "vuex"; // ⚪️ 引入状态管理
import router from "@/router";
import { GetProductList } from "@/network/order";
import { itemsMultiple } from "@/network/user";
export default {
    setup() {
        const store = useStore(); // 获取对象
        const state = reactive({
            indexofapp: store.state.user.indexofapp,
            isLoading: false,
            category: '1',
            CategoryList: [],
            ProductList: [],
            loading: false,
            finished: false,
            isRecommend: 0,
            pageSize: 600,
            currentPage: 1,
            Total: 0,
            PicUrl: '@/assets/img/Home/luckdraw.png'
        })
        onMounted(() => {
            init();
        });
        const onLoad = () => {
            // 异步更新数据
            console.log(state.ProductList.length);
            if (state.ProductList.length == state.Total) {
                if (state.ProductList.length != 0) {
                    state.loading = false
                    state.finished = true
                }
            } else {
                state.currentPage = parseInt(state.currentPage) + 1;
                GetProduct();
            }
        }
        // 初始化信息
        const init = () => {
            var params = {
                catalogNames: 'Category'
            }
            // 获取商品列表  商品类型   字典key    Category
            itemsMultiple(params).then((res) => {
                state.CategoryList = res.Data.Category;
                state.CategoryList.unshift({
                    Key: "推荐", Value: "0", Remark: null
                })
                state.category = state.CategoryList[0].Value;
                GetProduct()
            });
        };
        const CategoryFan = (value) => {
            state.category = value;
            GetProduct();
        }
        // 获取商品列表
        const GetProduct = () => {
            const toast = Toast.loading({
                duration: 0,
                forbidClick: true,
                message: '列表获取中...',
            });
            if (state.category == 0) {
                state.isRecommend = 1
                var params = {
                    isRecommend: state.isRecommend,
                    pageSize: state.pageSize,
                    currentPage: state.currentPage
                }
            } else {
                var params = {
                    category: state.category,
                    pageSize: state.pageSize,
                    currentPage: state.currentPage
                }
            }
            // 获取商品列表
            GetProductList(params).then((res) => {
                toast.clear();
                if (res.Code == 0) {
                    var data = res.Data;
                    state.ProductList = data
                    // state.Total = res.Pager.Total
                    // if (data.length > 0) {
                    //     data.forEach(element => {
                    //         state.ProductList.push(element)
                    //     });
                    // } else {
                    //     state.loading = false
                    //     state.finished = true
                    // }
                } else { }
            });
        };
        const goProductDetails = (ID) => {
            if (window.requesTag) {
                router.push({ path: "/ProductDetails", query: { id: ID } });
            } else {
                router.push({ path: "/ProductDetailsH5", query: { id: ID } });
            }
        };
        const goLuckdraw = () => {
            router.push({
                path: "/luckdraw",
                query: {
                    date: new Date().getTime()
                }
            });
        };
        const onRefresh = () => {
            init()
            state.isLoading = false
        }
        return {
            ...toRefs(state),
            onLoad,
            GetProduct,
            goProductDetails,
            goLuckdraw,
            CategoryFan,
            onRefresh
        };
    },
};
</script>